<template>
    <div>
        <div class="search">
            <input v-model="keyword" class="search-input" type="text" placeholder="请输入城市名字或拼音">
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class="search-item border-bottom" v-for="item of list" @click="handleCityClick(item.name)">{{item.name}}</li>
                <li class="search-item border-bottom" v-show="!list.length">没有找到匹配数据</li>
            </ul>
        </div>
    </div>
    
</template>

<script>
import Bscroll from 'better-scroll'
    export default{
        name:"CitySearch",
        props:{
            cities:Object
        },
        data(){
            return {
                keyword:"",
                list:[],
                timer:null
            }
        },
        watch:{
            keyword(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                if(!this.keyword){
                    this.list = []
                    return
                }
                this.timer = setTimeout(()=>{
                    const result = []
                    for(let i in this.cities){
                        this.cities[i].forEach((value)=>{
                            if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1){
                                result.push(value)
                            }
                        })
                    }
                    this.list = result
                },100)
            }
        },
        methods:{
            handleCityClick(city){
                this.$store.commit("changeCity",city) 
                this.$router.push("/")
            }
        },
        mounted(){
            this.scroll = new Bscroll(this.$refs.search)
        }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search
    height 0.72rem
    padding:0.1rem
    background-color $bgColor
    .search-input
        box-sizing:border-box
        width 100%
        height 0.62rem
        padding:0 0.1rem
        line-height 0.62rem
        text-align center
        border-radius:0.06rem
        font-size:0.3rem
        color:#666
.search-content
    z-index 1
    overflow hidden
    position absolute
    top 1.78rem
    left 0
    right 0
    bottom 0
    background-color #eee
    .search-item
        line-height 0.62rem
        padding-left: 0.2rem
        background-color #fff
        color:#666
</style>
